<template>
  <div id="app">
    <h1>SQL Syntax Checker</h1>
    <textarea v-model="sql" placeholder="Enter your SQL here..."></textarea>
    <button @click="validateSQL">Validate SQL</button>
    <pre v-if="error">{{ error }}</pre>
    <pre v-if="parsed">{{ parsed }}</pre>
  </div>
</template>

<script>
// 引入 node-sql-parser
import { Parser } from 'node-sql-parser';

export default {
  data() {
    return {
      sql: '',
      error: null,
      parsed: null,
    };
  },
  methods: {
    validateSQL() {
      const parser = new Parser();
      try {
        // 解析 SQL
        const ast = parser.astify(this.sql);
        this.error = null;
        this.parsed = JSON.stringify(ast, null, 2);
      } catch (err) {
        // 捕获并显示错误
        this.error = err.message;
        this.parsed = null;
      }
    },
  },
};
</script>

<style>
/* 样式 */
textarea {
  width: 100%;
  height: 200px;
}
button {
  margin-top: 10px;
}
pre {
  background-color: #f8f8f8;
  padding: 10px;
  margin-top: 10px;
}
</style>
